<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>frequency decoder ~ Unobtrusive JavaScript datePicker
			(calendar) widgit demo</title>
		<script type="text/javascript" src="../js/lang/en.js"></script>
		<script type="text/javascript" src="../js/datepicker.js"></script>
		<link href="../css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../css/datepicker.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
.englishDate {
	display: block;
	font: lighter oblique 12px/ 12px helvetica, arial, sans-serif;
	text-align: left;
	color: #555;
	margin: 0 0 0 0.5em;
}

.schedsearchtable label {
	font: bold 12px/ 12px helvetica, arial, sans-serif;
	text-align: right;
	color: #666;
	text-transform: none;
	display: block;
	margin-bottom: 0.2em;
}

h1 {
	font: normal 42px/ 42px helvetica, arial, sans-serif;
	text-align: center;
	color: #555;
	text-transform: none;
	display: block;
	margin-bottom: 1.2em;
}

form {
	text-align: left;
}
</style>

		<script type="text/javascript">
// <![CDATA[  


// An object that ties the two datePickers together 
var bookingPod = window.bookingPod = {
        // Default departure cursor date : todays date + 7
        "OUTWARD_CURSOR"    : 7,
        // Default return cursor date : departure date + 7
        "RETURN_CURSOR"     : 7, 
        // Min days between departure and return dates      
        "MIN_DAYS_BETWEEN"  : 0,                     
        // Default messages
        "MESSAGES"          : { "MD1" : "Please select a departure date", "MD2" : " Please select a return date" },
        // Maximum days ahead that a flight can be booked
        "MAX_DATE_LIMIT"    : 360,
        // Minimum days ahead that a flight can be booked
        "MIN_DATE_LIMIT"    : 0,
                        
        createYYYYMMDDString: function(dt) {
                return dt ? dt.getFullYear() + String(dt.getMonth() + 1 < 10 ? "0" + (dt.getMonth() + 1) : dt.getMonth() + 1) + (dt.getDate() < 10 ? "0" + dt.getDate() : dt.getDate()) : "";                                                             
        },
        checkOutwardDate: function(cbObj) {              
                // Show the date 
                bookingPod.showEnglishDate(cbObj);                
                
                // An invalid or no outward date was entered
                if(!cbObj.date) {                                            
                        // Set the default cursor dates on the return element
                        var today       = new Date(),
                            defaultOut  = new Date(today.getFullYear(), today.getMonth(), today.getDate() + bookingPod.OUTWARD_CURSOR),
                            defaultRet  = new Date(defaultOut.getFullYear(), defaultOut.getMonth(), defaultOut.getDate() + bookingPod.RETURN_CURSOR),                                                                           
                            rangeHigh   = new Date(today.getFullYear(), today.getMonth(), today.getDate() + bookingPod.MAX_DATE_LIMIT),                
                            rangeLow    = new Date(today.getFullYear(), today.getMonth(), today.getDate() + bookingPod.MIN_DATE_LIMIT);                
                        
                        // Reset the outward default ranges        
                        datePickerController.setRangeHigh("MD2", bookingPod.createYYYYMMDDString(rangeHigh));
                        datePickerController.setRangeLow("MD2", bookingPod.createYYYYMMDDString(rangeLow));  
                         
                        // Set the outward cursor to be the default value : today's date + OUTWARD_CURSOR     
                        datePickerController.setCursorDate("MD1", bookingPod.createYYYYMMDDString(defaultOut)); 
                                                 
                        // If no return date set then reset the cursor position to be today's date + OUTWARD_CURSOR + RETURN_CURSOR  
                        if(!datePickerController.getSelectedDate("MD2")) {                                                                                                                                               
                                datePickerController.setCursorDate("MD2", bookingPod.createYYYYMMDDString(defaultRet)); 
                        };                                             
                        
                        return;
                };                                           
                
                // Set the rangeLow of the return to be the outward date + MIN_DAYS_BETWEEN                                               
                datePickerController.setRangeLow("MD2", bookingPod.createYYYYMMDDString(new Date(cbObj.yyyy, +cbObj.mm - 1, (+cbObj.dd + bookingPod.MIN_DAYS_BETWEEN), 5, 0, 0, 0)));  
                
                // If no valid return date set 
                if(!datePickerController.getSelectedDate("MD2")) {                         
                        // Set the return date to be departure date + RETURN_CURSOR                        
                        datePickerController.setSelectedDate("MD2", bookingPod.createYYYYMMDDString(new Date(cbObj.yyyy, +cbObj.mm - 1, (+cbObj.dd + bookingPod.RETURN_CURSOR), 5, 0, 0, 0)));  
                };
        },
        
        checkReturnDate: function(cbObj) {
                // Set the return cursor date if none set
                if(!cbObj.date) {                          
                        var depDate     = datePickerController.getSelectedDate("MD1") || new Date();                                              
                        // Set the outward cursor to be the default value : todays date + OUTWARD_CURSOR     
                        datePickerController.setCursorDate("MD2", bookingPod.createYYYYMMDDString(new Date(depDate.getFullYear(), depDate.getMonth(), depDate.getDate() + bookingPod.RETURN_CURSOR)));                   
                }; 
                
                // Show the date                 
                bookingPod.showEnglishDate(cbObj);                
        },
        
        showEnglishDate : function(argObj) {                
                // Grab the span & get a more English-ised version of the selected date
                var spn = document.getElementById(argObj.id + "-EnglishDate"),
                    formattedDate = !(argObj.date == null) ? datePickerController.printFormattedDate(argObj.date, "l-cc-sp-d-S-sp-F-sp-Y", false) || bookingPod.MESSAGES[argObj.id] : bookingPod.MESSAGES[argObj.id];
                                
                while(spn.firstChild) spn.removeChild(spn.firstChild);
                      
                // Note: The 3rd argument to printFormattedDate is a Boolean value that 
                // instructs the script to use the imported locale (true) or not (false)
                // when creating the dates. In this case, I'm not using the imported locale
                // as I've used the "S" format mask, which returns the English ordinal
                // suffix for a date e.g. "st", "nd", "rd" or "th" and using an
                // imported locale would look strange if an English suffix was included        
                
                // Add a new text node containing our formatted date
                spn.appendChild(document.createTextNode(formattedDate));
        }
}

// ]]>
</script>

	</head>
	<body>
		<form id="testform" method="post" action="">
			<h1>
				Booking form test
			</h1>

			<table cellspacing="0" cellpadding="2" class="schedsearchtable">
				<tbody>
					<tr>
						<td>
							<label for="DD1">
								Departing
							</label>
						</td>
						<td>
							<select id="TD1" name="TD1">
								<option selected="selected">
									Anytime
								</option>
								<option>
									Morning
								</option>
								<option>
									Midday
								</option>
								<option>
									Evening
								</option>
								<option>
									Night
								</option>
								<option>
									0100
								</option>
								<option>
									0200
								</option>
								<option>
									0300
								</option>
								<option>
									0400
								</option>
								<option>
									0500
								</option>
								<option>
									0600
								</option>
								<option>
									0700
								</option>
								<option>
									0800
								</option>
								<option>
									0900
								</option>
								<option>
									1000
								</option>
								<option>
									1100
								</option>
								<option>
									1200
								</option>
								<option>
									1300
								</option>
								<option>
									1400
								</option>
								<option>
									1500
								</option>
								<option>
									1600
								</option>
								<option>
									1700
								</option>
								<option>
									1800
								</option>
								<option>
									1900
								</option>
								<option>
									2000
								</option>
								<option>
									2100
								</option>
								<option>
									2200
								</option>
								<option>
									2300
								</option>
							</select>
							<!-- Departure Date -->
							<select name="DD1" id="DD1">

								<option value="1">
									1
								</option>
								<option value="2">
									2
								</option>
								<option value="3">
									3
								</option>
								<option value="4">
									4
								</option>
								<option value="5">
									5
								</option>
								<option value="6">
									6
								</option>
								<option value="7">
									7
								</option>
								<option value="8">
									8
								</option>
								<option value="9">
									9
								</option>
								<option value="10">
									10
								</option>
								<option value="11">
									11
								</option>
								<option value="12">
									12
								</option>
								<option value="13">
									13
								</option>
								<option value="14">
									14
								</option>
								<option value="15">
									15
								</option>
								<option value="16">
									16
								</option>
								<option value="17">
									17
								</option>
								<option value="18">
									18
								</option>
								<option value="19">
									19
								</option>
								<option value="20">
									20
								</option>
								<option value="21">
									21
								</option>
								<option value="22">
									22
								</option>
								<option value="23">
									23
								</option>
								<option value="24">
									24
								</option>
								<option value="25">
									25
								</option>
								<option value="26">
									26
								</option>
								<option value="27">
									27
								</option>
								<option value="28">
									28
								</option>
								<option value="29">
									29
								</option>
								<option value="30">
									30
								</option>
								<option value="31">
									31
								</option>
							</select>
							<!-- Departure Month -->
							<select id="MD1" name="MD1">
								<option value="082009">
									August 2009
								</option>
								<option value="092009">
									September 2009
								</option>
								<option value="102009">
									October 2009
								</option>
								<option value="112009">
									November 2009
								</option>
								<option value="122009">
									December 2009
								</option>
								<option value="012010">
									January 2010
								</option>
								<option value="022010">
									February 2010
								</option>
								<option value="032010">
									March 2010
								</option>
								<option value="042010">
									April 2010
								</option>
								<option value="052010">
									May 2010
								</option>
								<option value="062010">
									June 2010
								</option>
								<option value="072010">
									July 2010
								</option>

							</select>
						</td>
						<td>
							<span id="MD1-EnglishDate" class="englishDate"></span>
						</td>
					</tr>
					<tr>
						<td>
							<label for="DD2">
								Returning
							</label>
						</td>
						<td>
							<select id="TD2" name="TD2">
								<option selected="selected">
									Anytime
								</option>
								<option>
									Morning
								</option>
								<option>
									Midday
								</option>
								<option>
									Evening
								</option>
								<option>
									Night
								</option>
								<option>
									0100
								</option>
								<option>
									0200
								</option>
								<option>
									0300
								</option>
								<option>
									0400
								</option>
								<option>
									0500
								</option>
								<option>
									0600
								</option>
								<option>
									0700
								</option>
								<option>
									0800
								</option>
								<option>
									0900
								</option>
								<option>
									1000
								</option>
								<option>
									1100
								</option>
								<option>
									1200
								</option>
								<option>
									1300
								</option>
								<option>
									1400
								</option>
								<option>
									1500
								</option>
								<option>
									1600
								</option>
								<option>
									1700
								</option>
								<option>
									1800
								</option>
								<option>
									1900
								</option>
								<option>
									2000
								</option>
								<option>
									2100
								</option>
								<option>
									2200
								</option>
								<option>
									2300
								</option>
							</select>
							<!-- Return Date -->
							<select id="DD2" name="DD2">

								<option value="1">
									1
								</option>
								<option value="2">
									2
								</option>
								<option value="3">
									3
								</option>
								<option value="4">
									4
								</option>
								<option value="5">
									5
								</option>
								<option value="6">
									6
								</option>
								<option value="7">
									7
								</option>
								<option value="8">
									8
								</option>
								<option value="9">
									9
								</option>
								<option value="10">
									10
								</option>
								<option value="11">
									11
								</option>
								<option value="12">
									12
								</option>
								<option value="13">
									13
								</option>
								<option value="14">
									14
								</option>
								<option value="15">
									15
								</option>
								<option value="16">
									16
								</option>
								<option value="17">
									17
								</option>
								<option value="18">
									18
								</option>
								<option value="19">
									19
								</option>
								<option value="20">
									20
								</option>
								<option value="21">
									21
								</option>
								<option value="22">
									22
								</option>
								<option value="23">
									23
								</option>
								<option value="24">
									24
								</option>
								<option value="25">
									25
								</option>
								<option value="26">
									26
								</option>
								<option value="27">
									27
								</option>
								<option value="28">
									28
								</option>
								<option value="29">
									29
								</option>
								<option value="30">
									30
								</option>
								<option value="31">
									31
								</option>
							</select>

							<select id="MD2" name="MD2">
								<option value="082009">
									August 2009
								</option>
								<option value="092009">
									September 2009
								</option>
								<option value="102009">
									October 2009
								</option>
								<option value="112009">
									November 2009
								</option>
								<option value="122009">
									December 2009
								</option>
								<option value="012010">
									January 2010
								</option>
								<option value="022010">
									February 2010
								</option>
								<option value="032010">
									March 2010
								</option>
								<option value="042010">
									April 2010
								</option>
								<option value="052010">
									May 2010
								</option>
								<option value="062010">
									June 2010
								</option>
								<option value="072010">
									July 2010
								</option>

							</select>
						</td>
						<td>
							<span id="MD2-EnglishDate" class="englishDate"></span>
						</td>
					</tr>
				</tbody>
			</table>
		</form>

		<script type="text/javascript">
// <![CDATA[         
        var today       = new Date();        
        
        // START: Just for the demo to reset the departure date to todays date
        // This would always be done server side in reality...                       
        document.getElementById("DD1").selectedIndex = today.getDate();
        
        var depElem = document.getElementById("MD1"),
            opts = depElem.options,
            dt = ((today.getMonth() + 1) < 10 ? "0" + (today.getMonth() + 1) : (today.getMonth() + 1)) + "" + today.getFullYear();
            
        for(var i = 0, opt; opt = opts[i]; i++) {
                if(opt.value == dt) {
                        opt.selected = true;
                        break;
                };
        }
        // END: just for the demo...
        
        // Default options
        var opts = {                             
                splitDate:true, 
                staticPos:false,
                fillGrid:true,
                constrainSelection:false,                
                noTodayButton:true,
                // You would most probably calculate both the high and low ranges server side...
                rangeLow:bookingPod.createYYYYMMDDString(new Date(today.getFullYear(), today.getMonth(), today.getDate() + bookingPod.MIN_DATE_LIMIT)),
                rangeHigh:bookingPod.createYYYYMMDDString(new Date(today.getFullYear(), today.getMonth(), today.getDate() + bookingPod.MAX_DATE_LIMIT)),                       
                callbackFunctions:{"create":[bookingPod.checkReturnDate],"dateset":[bookingPod.checkReturnDate]},                                                   
                statusFormat:"l-cc-sp-d-S-sp-F-sp-Y"      
        };  
        
        // Create Slave first
        opts.formElements = { "MD2":"m-Y", "DD2":"j" };                        
        datePickerController.createDatePicker(opts);
        
        // Master second
        opts.formElements = { "MD1":"m-Y", "DD1":"j" };   
        opts.callbackFunctions = {"create":[bookingPod.checkOutwardDate],"dateset":[bookingPod.checkOutwardDate]};
                         
        datePickerController.createDatePicker(opts);
// ]]>
</script>
	</body>
</html>

